<script lang="ts" setup>
import * as TemplateManagerApi from '@/mock/creative/smart-media/template-manager'

const emit = defineEmits(['createProject'])

const categoryList = ref<any[]>([])
const templateMap = ref<any>({})
const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  keyword: ''
})
const queryFormRef = ref()

/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.pageNo = 1
}

/** 重置按钮操作 */
const resetQuery = () => {
  queryFormRef.value.resetFields()
  handleQuery()
}

/** 分类标签点击事件 */
const handleCategoryTabClick = (tab: any) => {
  if (templateMap.value[tab.props.label]) return

  TemplateManagerApi.listPublicTemplatesByCategoryName({
    categoryName: tab.props.label
  }).then((templates) => {
    templateMap.value[tab.props.label] = templates
  })
}

onMounted(() => {
  TemplateManagerApi.listPublicTemplateCategories()
    .then((categories) => {
      categoryList.value = categories
    })
    .then(() => {
      TemplateManagerApi.listPublicTemplatesByCategoryName({
        categoryName: categoryList.value[0]
      }).then((templates) => {
        templateMap.value[categoryList.value[0]] = templates
      })
    })
})

/** 预览 */
const videoPreviewVisible = ref(false)
const currentPreviewVideo = ref('')
const handlePreview = (videoUrl: string) => {
  currentPreviewVideo.value = videoUrl
  videoPreviewVisible.value = true
}
const beforeClose = () => {
  currentPreviewVideo.value = ''
  videoPreviewVisible.value = false
}

/** 通过模板创建项目 */
const startNewCreation = (template: any) =>
  emit('createProject', template.templateId, JSON.stringify(template.clipsParam))
</script>

<template>
  <ContentWrap>
    <el-tabs tab-position="left" @tab-click="handleCategoryTabClick">
      <el-tab-pane v-for="category in categoryList" :key="category" :label="category">
        <div class="grid grid-cols-5 gap-8">
          <div v-for="template in templateMap[category]" :key="template.templateId">
            <el-card :body-style="{ padding: '0' }" shadow="hover">
              <el-image :src="template.previewImage" />
              <div class="flex flex-col justify-between gap-2 px-3 pt-1 pb-3">
                <el-tooltip :content="template.title" placement="top">
                  <span class="truncate">{{ template.title }}</span>
                </el-tooltip>
                <div class="flex justify-end">
                  <el-button @click="handlePreview(template.previewVideo)">预览</el-button>
                  <el-button type="primary" @click="startNewCreation(template)">使用</el-button>
                </div>
              </div>
            </el-card>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </ContentWrap>

  <!-- 预览弹窗 -->
  <el-dialog
    title="预览"
    v-model="videoPreviewVisible"
    close-on-click-modal
    close-on-press-escape
    width="50%"
    draggable
    :before-close="beforeClose"
  >
    <div class="flex justify-center">
      <video v-if="currentPreviewVideo" class="h-96" controls autoplay>
        <source :src="currentPreviewVideo" type="video/mp4" />
      </video>
    </div>
  </el-dialog>
</template>

<style scoped></style>
